<template>
  <van-field
    v-model="item.value"
    :disabled="options.disabled"
    :name="item.itemTitle"
    :placeholder="'点击选择'"
    :required="item.isRequired === 'Y'"
    :rules="[
      { required: item.isRequired === 'Y', message: '请上传' + item.itemTitle },
    ]"
    is-link
    label-width="33rem"
    readonly
    @click="openPop"
  >
    <template #label>
      <span>{{ titleText(options, item) }}</span>
      <p v-if="options.showDesc" class="desc f12 ml30">
        {{ options.description }}
      </p>
    </template>
  </van-field>
  <!-- 弹出选框 -->
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
      :columns="columns"
      :columns-field-names="customFieldName"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup>
import { titleText } from "@/utils/common.js";
import { ref, } from "vue";

//defineOptions({ name: "H5TradeUnion" });

const { item, type } = defineProps(["item", "type"]);

const emits = defineEmits(["change"]);

const showPicker = ref(false);
const columns = item.itemOptResList
  .filter((ite) => ite.show || ite.show === undefined)
  .map((item) => {
    item.label = item.optionName;
    return item;
  });
const customFieldName = { text: "optionName", value: "itemOptionId" };
const { options } = JSON.parse(item.vformJson);
// 传递值改变后
const onChange = () => emits("change", item);
// 确认选择
const onConfirm = ({ selectedOptions }) => {
  item.value = selectedOptions[0].label;
  item.list = selectedOptions;
  showPicker.value = false;
  onChange();
};
// 点击去选择
const openPop = () => {
  showPicker.value = !(type === "view" || options.disabled);
};
</script>